<template>
  <div class="phone-register">
    <div class="phone-register-wrapper">
      <div class="phone-register-box">
        <div class="close-wrapper">
          <span class="close" @click="closePhoneBox">
          <img width="100%" height="100%" src="../../assets/img/close@3x.png"/>
        </span>
        </div>
        <div class="phone-register-content">
          <div class="input-wrapper">
            <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
            <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
          </div>
          <div class="input-wrapper">
            <mt-field placeholder="请输入验证码" v-model="captcha"></mt-field>
            <span class="captcha-btn" @click="countDown" :class="{'captcha-active':start}">
              <count-down :start=start></count-down>
            </span>
            <p class="tips" v-show="state.captcha === 'error'">验证码不能为空</p>
          </div>
          <div class="input-wrapper">
            <mt-field :state="state.password" placeholder="请输入您的密码" type="password" v-model="password"></mt-field>
            <p class="tips" v-show="state.password === 'error'">请输入长度为6-20位数的密码</p>
          </div>
          <div class="bottom-big-btn">
            <a href="javascript:;" class="submit" @click="userRegister"
               :class="{'btn-readonly': state.password !== 'success' || state.phone !== 'success' || state.captcha!== 'success' || !acceptRule}">
              立即注册</a>
          </div>
          <div class="register-input-detail">
            <a href="javascript:;" class="box" @click="accept">
              <img width="100%" height="100%" src="../../assets/img/pc-get.png" v-if="acceptRule"/>
            </a>
            <span class="accept">我已阅读并接受<a href="javascript:;" class="user-protocol"
                                           @click="showUserArgument">《用户协议》</a></span>
          </div>
          <div class="out-login">
            <span class="line"></span>
            <span class="out-login-text">第三方登录</span>
            <span class="line"></span>
          </div>
          <div class="weChat">
            <a href="javascript:;" class="box" @click="chooseWechat">
              <img width="100%" height="100%" src="../../assets/img/wechat@3x.png">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="user-argument-wrapper" v-if="userArgument">
      <user-argument></user-argument>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import countDown from '../../components/common/countDown/countDown'
  import userArgument from '../../components/common/user-argument/user-argument'
  import {closePhoneBox} from '../../assets/js/common'

  export default {
    data() {
      return {
        start: false,
        acceptRule: false,
        userArgument: false,
        state: {
          phone: '',
          password: '',
          captcha: ''
        },
        phoneNumber: '',
        captcha: '',
        password: ''
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      },
      password(value) {
        if (value.length < 6 || value.length > 20) {
          this.state.password = 'error'
        } else {
          this.state.password = 'success'
        }
      },
      captcha(value) {
        if (value) {
          this.state.captcha = 'success'
        } else {
          this.state.captcha = 'error'
        }
      }
    },
    methods: {
      closePhoneBox,
      countDown() {
        if (this.state.phone === 'success') {
          this.start = true
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=sendSms', {
            params: {
              phone: this.phoneNumber,
              type: 0
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '发送成功',
                duration: 1000,
                position: 'bottom'
              })
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000,
                position: 'bottom'
              })
            }
          })
        }
      },
      chooseWechat() {
        window.location.href = 'https://www.h5youx.com/game/index.php?m=Home&c=PcApi&a=wxMobileAuth'
      },
      userRegister() {
        if (this.state.password === 'success' && this.state.phone === 'success' && this.state.captcha === 'success' && this.acceptRule) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=register', {
            params: {
              phone: this.phoneNumber,
              code: this.captcha,
              password: this.password
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '注册成功，即将跳转至登录页面...',
                duration: 2000,
                position: 'bottom'
              })
              setTimeout(() => {
                this.$router.push({path: '/phoneLogin'})
              }, 2000)
            } else {
              this.Toast({
                message: response.data.info,
                duration: 1000,
                position: 'bottom'
              })
            }
          })
        }
      },
      accept() {
        this.acceptRule = !this.acceptRule
      },
      showUserArgument() {
        this.userArgument = true
      }
    },
    mounted() {
      this.eventBus.$on('countDown', (stat) => {
        this.start = stat
      })
      this.eventBus.$on('closeUserArgument', (stat) => {
        this.userArgument = stat
      })
    },
    components: {
      countDown,
      userArgument
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .phone-register
    position fixed
    width 100%
    height 100%
    top 0
    left 0
    background #fff
    z-index 99
    .phone-register-wrapper
      display flex
      justify-content center
      align-items center
      width 100%
      height 100%
      background rgba(0, 0, 0, .2)
      .phone-register-box
        width 620px
        height 772px
        background #fff
        border-radius 10px
        .close-wrapper
          position relative
          .close
            position absolute
            display block
            top 19px
            right 12px
            width 36px
            height 35px
        .phone-register-content
          margin-top 122px
          padding 0 82px
          .input-wrapper
            position relative
            .captcha-btn
              position absolute
              display block
              width 179px
              height 59px
              top 6px
              right 5px
              text-align center
              font-size 28px
              line-height 59px
              color #fff
              background #2ECC40
              z-index 99
              border-radius 5px
              &.captcha-active
                background #ccc
          /*          .register-text-box
                      position relative
                      display inline-flex
                      margin-top 24px
                      width 100%
                      .squire
                        display block
                        margin-right 27px
                        width 26px
                        height 26px
                        border 1px solid #bfbfbf
                      .get
                        position absolute
                        display block
                        width 28px
                        height: 18px
                        top 2px
                        left 2px
                      .register-text
                        font-size 26px
                        color #666*/
          .register-input-detail
            position relative
            display inline-flex
            margin-top 30px
            width: 100%
            span
              display block
              font-size 29px
              white-space nowrap
              color #666
            .box
              margin-right 9px
              width 27px
              height 27px
              border 2px solid rgba(0, 0, 0, .2)
              border-radius 1px
          .out-login
            display inline-flex
            margin-top 34px
            width 100%
            span
              display block
            .line
              flex 1
              margin-top 10px
              border-top 2px solid rgba(0, 0, 0, .2)
            .out-login-text
              flex 1
              text-align center
              font-size 22px
              color #ccc
          .weChat
            margin 23px auto 0 auto
            width 55px
            height 47px
            img
              border-radius 0
    .user-argument-wrapper
      position absolute
      padding 0 40px 40px 40px
      top 0
      left 0
      width 100%
      height 100%
      background #fff
      z-index 999;
      overflow auto
      box-sizing border-box
      .user-argument
        .user-argument-header
          font-size: 32px;
          margin-top: 30px;
          color: #000;
          text-align: center;
          font-weight: bold;
        .user-argument-header-detail
          margin: 32px 0 23px 0;
          font-size: 20px;
          color: #000;
          font-weight: bold;
          text-align: center;
        .user-argument-content-bold
          margin-top: 32px;
          font-size: 20px;
          line-height: 30px;
          color: #000;
          font-weight: bold;
        .user-argument-content
          font-size: 20px;
          line-height: 30px;
          color: #000;
</style>
